<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery-3.7.1.min.js"></script>
    <script src="../js/bootstrap.bundle.js"></script>
    <title>导航</title>
</head>
<body>
    <!-- 默认导航 -->
    <nav class="nav">
        <a href="#" class="nav-item nav-link active">首页</a>
        <a href="#" class="nav-item nav-link ">关于我们</a>
        <a href="#" class="nav-item nav-link ">联系方式</a>
    </nav>
    <hr>
    <!-- 选项卡导航 -->
    <nav class="nav nav-tabs">
        <a href="#" class="nav-item nav-link ">首页</a>
        <a href="#" class="nav-item nav-link active">关于我们</a>
        <a href="#" class="nav-item nav-link ">联系方式</a>
    </nav>
    <hr>
    <!-- 胶囊导航 -->
    <nav class="nav nav-pills">
        <a href="#" class="nav-item nav-link ">首页</a>
        <a href="#" class="nav-item nav-link ">关于我们</a>
        <a href="#" class="nav-item nav-link active">联系方式</a>
    </nav>
<hr>
    <!-- 导航的对齐方式 -->
    <nav class="nav">
        <a href="#" class="nav-item nav-link active">首页</a>
        <a href="#" class="nav-item nav-link ">关于我们</a>
        <a href="#" class="nav-item nav-link ">联系方式</a>
    </nav>
    <hr>
    <!-- .justify-content-center水平居中对齐 -->
    <nav class="nav justify-content-center">
        <a href="#" class="nav-item nav-link active">首页</a>
        <a href="#" class="nav-item nav-link ">关于我们</a>
        <a href="#" class="nav-item nav-link ">联系方式</a>
    </nav>
    <hr>
    <!-- .justify-content-end水平居右对齐 -->
    <nav class="nav justify-content-end">
        <a href="#" class="nav-item nav-link active">首页</a>
        <a href="#" class="nav-item nav-link ">关于我们</a>
        <a href="#" class="nav-item nav-link ">联系方式</a>
    </nav>
    <!-- 垂直导航.flex-column -->
    <nav class="nav flex-column">
        <a href="#" class="nav-item nav-link active">首页</a>
        <a href="#" class="nav-item nav-link ">关于我们</a>
        <a href="#" class="nav-item nav-link ">联系方式</a>
    </nav>
    <hr>
<!-- .nav-fill强制导航项延申并按比例填充所有可用宽度，导航项的宽度可以被内容撑开 -->
    <nav class="nav nav-pills nav-fill">
        <a href="#" class="nav-item nav-link ">首页</a>
        <a href="#" class="nav-item nav-link ">关于我们</a>
        <a href="#" class="nav-item nav-link active">联系方式-------------------联系方式</a>
    </nav>
    <hr>
    <!-- .nav-justified平均分配导航项的空间 -->
    <nav class="nav nav-pills nav-justified">
        <a href="#" class="nav-item nav-link ">首页</a>
        <a href="#" class="nav-item nav-link ">关于我们</a>
        <a href="#" class="nav-item nav-link active">联系方式-------------------联系方式</a>
    </nav>
    <!-- 带下拉框的导航 -->
    <hr>
    <!-- 带下拉菜单的选项卡导航 -->
    <nav class="nav nav-tabs">
        <a href="#" class="nav-item nav-link ">首页</a>
        <a href="#" class="nav-item nav-link active">关于我们</a>
        <div class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">联系方式</a>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">邮箱</a>
                <a href="#" class="dropdown-item">手机</a>
                <a href="#" class="dropdown-item">微信</a>
            </div>
        </div>
    </nav>
    <hr>
    <nav class="nav nav-pills">
        <a href="#" class="nav-item nav-link ">首页</a>
        <a href="#" class="nav-item nav-link active">关于我们</a>
        <div class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">联系方式</a>
            <div class="dropdown-menu">
                <a href="#" class="dropdown-item">邮箱</a>
                <a href="#" class="dropdown-item">手机</a>
                <a href="#" class="dropdown-item">微信</a>
            </div>
        </div>
    </nav>
    
</body>
</html>